<template>
  <el-container style="height:100%; ">

    <el-aside width="auto">
        <!-- 侧边导航栏组件 -->
        <BackAside></BackAside>
    </el-aside>

    <el-container>
      <el-header>
        <!-- 头部组件 -->
        <BackHeader></BackHeader>
      </el-header>
        <!-- tag面包屑部分 -->
        <BackTag></BackTag>
      <el-main>
        <!-- 主体路由 -->
        <router-view></router-view>
      </el-main>

    </el-container>

  </el-container>
</template>

<script>
export default {
    name: 'BackHome',
    components: {
        BackAside:()=>import('../../components/back/BackAside.vue'),
        BackHeader:()=>import('../../components/back/BackHeader.vue'),
        BackTag:()=>import('../../components/back/BackTag.vue'),
    }
}
</script>

<style scoped>
.el-aside {
  box-shadow: 5px 0 10px #b1aaaa;
}
.el-header {
  /* 子绝 父相 */
  position: relative;
  background-color: #fff;
  border-bottom: 1px solid #e6d8d8;
  /* 阴影 */
  box-shadow: 0 1px 2px #c3aeae;
}
.el-main {
    padding-top: 0;
    /* 更具主体的内容自动显示滚动条 */
    overflow: auto;
}
.el-container.is-vertical {
  /* 设置主体框（header 和 min 区域的盒子高度  100vh）防止网页收缩 aside变形 */
    height: 100%;
}
</style>